<!--
 * @Author: 小花
 * @Date: 2022-05-12 15:58:45
 * @LastEditors: 小花
 * @LastEditTime: 2022-05-16 21:13:42
 * @FilePath: /vue3-teap/src/components/PermissionManage.vue
 * @Description:
-->
<template>
  <el-table :data="permissionList" style="width: 100%">
    <el-table-column label="权限ID" prop="permId" />
    <el-table-column label="权限名" prop="permName" />
    <el-table-column align="right">
      <template #header>
        <button class="addRoleButton" @click="addPermissionFn">
          <div class="icon">
            <i class="fa fa-plus" aria-hidden="true"></i>
          </div>
          <span>添加权限</span>
        </button>
      </template>
      <template #default="scope">
        <el-button type="danger" plain round @click="delPermissionFn(scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRaw, toRefs } from 'vue'
import { pullPermission, addPermission, delPermission } from '@/plugins/request/http'
import PermissionManageData, { IPermission } from '@/model/main/layout/dynamicNav/PermissionPage/PermissionManage'
import { useStore } from '@/plugins/store/store'
import nProgress from 'nprogress'
import { ElMessage } from 'element-plus'
import { responseUtil } from '@/plugins/request/responseUtil'

export default defineComponent({
  name: 'PermissionManage',
  setup () {
    const store = useStore()
    const coreData = reactive(new PermissionManageData())

    /**
     * @description: 后端拉取权限信息
     * @param {*}
     * @return {*}
     */
    const execPullPermission = async () => {
      nProgress.start()
      const result = await (await pullPermission()).data as responseUtil
      coreData.permissionList = result.data
      store.permission = result.data
      nProgress.done()
    }
    execPullPermission()

    /**
     * @description: 添加权限
     * @param {*}
     * @return {*}
     */
    const addPermissionFn = async () => {
      nProgress.start()
      const inputPermission = prompt('请输入权限名称')
      if (inputPermission === null || inputPermission === '') {
        nProgress.done()
        return
      }
      const result = await (await addPermission(inputPermission)).data as responseUtil
      coreData.permissionList.push({
        permId: result.data,
        permName: inputPermission
      })
      store.permission = toRaw(coreData.permissionList)
      ElMessage.success('权限添加成功')
      nProgress.done()
    }

    /**
     * @description: 删除权限
     * @param {*} row 权限对象
     * @return {*}
     */
    const delPermissionFn = async (row: IPermission) => {
      const isDel = confirm(`确定要删除 ${row.permName}?`)
      if (isDel) {
        nProgress.start()
        await delPermission(row.permId)
        coreData.permissionList.splice(
          coreData.permissionList.findIndex(item => item.permId === row.permId), 1
        )
        store.permission = toRaw(coreData.permissionList)
        ElMessage.success(`${row.permName} 删除成功`)
        nProgress.done()
      }
    }

    return {
      ...toRefs(coreData),
      addPermissionFn,
      delPermissionFn
    }
  }
})
</script>

<style lang='scss' scoped>
@import '@/assets/scss/addRoleButton.scss';
</style>
